<template>
    <div justify="center" class="box">
      <!-- <h1>欢迎使用 One Earth ~ </h1> -->
  
      <div class="group" v-for="(group, index) in items">
        <h3>{{ group.title }}</h3>
        <a-row :gutter="16">
          <a-col v-for="(item, index) in group.children" :key="index" :lg="4" :md="6" :sm="12" :xs="24">
            <a-card hoverable style="margin-bottom: 16px;" @click="onClickItem(item)" class="item">
              <template #cover>
                <div alt="thumb" :style="`background-image: url(${item.thumb})`" class="thumb"/>
              </template>
              <a-card-meta :title="item.title">
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
  
      </div>
  
    </div>
  </template>
  
  <script setup>
  
  import { useRouter } from 'vue-router'
  import { examples as items } from '../../common/example'
  
  const router = useRouter()
  
  const onClickItem = item => {
    const path = `/source?path=${item.url}&title=${item.title}`
    // router.push(path)
    const a = document.createElement('a')
    a.href = '/#' + path
    a.target = `_blank`
    a.click()
  }
  
  </script>
  
  <style lang="less" scoped>
  .box {
    padding: 24px 50px;
  
    h1 {
      border-bottom: 2px solid #aaa;
      padding-bottom: 10px;
    }
  
    .group {
      h3 {
        font-weight: bold;
      }
      .item{
        .thumb{
          aspect-ratio: 4/3;
          background-size: cover;
          background-position: center;        
        }
      }
    }
  }
  </style>